<template>
    <div class="box">
        <!-- 导航栏 -->
        <navBar title="详情"></navBar>
        <!-- 轮播图 -->
        <swiper :images="detail.pics"></swiper>
        <div>{{ detail.goods_name }}</div>
        <div style="color: red; font-weight: bold;font-size: 24px;">${{ detail.goods_price }}</div>
    </div>
</template>

<script setup>
import navBar from '@/components/navBar.vue';
import swiper from '@/components/swiper.vue';


import { ref } from "vue"

import { detailApi } from '@/api/api';

import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()

let detail = ref({})

let id = ref(route.query.id)
console.log(id.value)


const detailList = () => {
    detailApi(id.value).then((res) => {
        console.log(res)
        detail.value = res.data.message
    })
}
detailList()


</script>

<style lang="scss" scoped>
.box {
    width: 100%;
    height: 100%;

    .swiper {
        width: 100%;
        height: 25rem;

        .van-swipe,
        .van-swipe-item,
        img {
            width: 100%;
            height: 100%;
        }
    }
}
</style>